<template>
  <div id="seller" ref="seller_ref">销售统计</div>
</template>

<script>
export default {
  data() {
    return {
      originData: null,
      myChart: null,
      curpage: 1,
      totalpage: 0,
      pageSize: 5,
      intervalId: null,
      baseSize: null,
    };
  },
  computed: {
    // baseSize() {
    //   return (this.$refs.seller_ref.offsetWidth / 100) * 3.6;
    // },
    option() {
      return {
        title: {
          text: "商家销售统计",
          textStyle: {
            fontSize: this.baseSize,
          },
          left: 20,
          top: 20,
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: null,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
            z: 0,
            lineStyle: {
              width: this.baseSize,
              color: "#2d3443",
              type: "solid",
            },
          },
        },
        series: [
          {
            data: null,
            type: "bar",
            barWidth: this.baseSize,
            label: {
              show: true,
              position: "right",
              textStyle: {
                color: "white",
              },
            },
            itemStyle: {
              barBorderRadius: [0, this.baseSize / 2, this.baseSize / 2, 0],
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#5052ee",
                },
                {
                  offset: 1,
                  color: "#ab6ee5",
                },
              ]),
            },
          },
        ],
      };
    },
  },
  mounted() {
    this.initChart();
    this.renderChart();
    this.setInterval_my();
  },
  destroyed() {
    clearInterval(this.intervalId);
  },
  methods: {
    async getData() {
      const { data: ret } = await this.$axios.get("api/seller");
      this.originData = ret;
      this.originData.sort((a, b) => {
        return a.value - b.value;
      });
      this.totalpage =
        ret.length % this.pageSize === 0
          ? ret.length / this.pageSize
          : ret.length / this.pageSize + 1;
      //   console.log(this.totalpage);
    },
    initChart() {
      this.myChart = this.$echarts.init(
        document.querySelector("#seller"),
        "chalk"
      );
      if (this.$refs.seller_ref !== undefined) {
        this.baseSize = (this.$refs.seller_ref.offsetWidth / 100) * 3.6;
      }
      window.addEventListener("resize", () => {
        if (this.$refs.seller_ref !== undefined) {
          this.baseSize = (this.$refs.seller_ref.offsetWidth / 100) * 3.6;
        }
        this.myChart.resize();
      });
      this.myChart.on("mouseover", () => {
        clearInterval(this.intervalId);
      });
      this.myChart.on("mouseout", () => {
        this.setInterval_my();
      });
    },
    async renderChart() {
      this.myChart.showLoading();
      await this.getData();
      this.myChart.hideLoading();
      this.updateChart();
    },
    updateChart() {
      //   根据curpage设置相应数据
      let start = (this.curpage - 1) * this.pageSize;
      let end = start + this.pageSize;
      let temp = this.originData.slice(start, end);
      let names = temp.map((item) => item.name);
      let values = temp.map((item) => item.value);
      this.curpage++;
      if (this.curpage > this.totalpage) {
        this.curpage = 1;
      }
      this.option.yAxis.data = names;
      this.option.xAxis.max = this.originData[this.originData.length - 1].value;
      this.option.series[0].data = values;
      // console.log(this.option);
      this.myChart.setOption(this.option);
    },
    setInterval_my() {
      if (this.intervalId) {
        clearInterval(this.intervalId);
      }
      this.intervalId = setInterval(() => {
        this.updateChart();
      }, 1000);
    },
  },
};
</script>

<style lang="less" scoped>
#seller {
  width: 100%;
  height: 100%;
}
</style>